import React, { memo } from "react";
import { FollowAndFanWrap } from "./style";
import { getSizeImage } from "@/utils/format-utils";
import { NavLink } from "react-router-dom";

export default memo(function FollowFans(props) {
  return (
    <FollowAndFanWrap>
      <div className="clear">
        {props.type == "follows" ? (
          <p className="follow-p">
            关注（
            {props.userDetailInfo.length !== 0
              ? props.userDetailInfo.profile.follows
              : ""}
            ）
          </p>
        ) : (
          <p className="follow-p">
            粉丝（
            {props.userDetailInfo.length !== 0
              ? props.userDetailInfo.profile.followeds
              : ""}
            ）
          </p>
        )}
        <ul className="clear">
          {props.Info ? (
            props.Info.slice(0, 20).map((item, index) => {
              return (
                <li key={index + Math.random()}>
                  <div className="followImg">
                    <img src={getSizeImage(item.avatarUrl, 60)} alt="" />
                  </div>
                  <div className="followInfo">
                    <div className="followInfoName clear">
                      <NavLink
                        to={{
                          pathname: "/user/home",
                          search: "?id=" + item.userId,
                        }}
                      >
                        {item.nickname}
                      </NavLink>
                      {item.gender == 1 ? (
                        <i className="boy-icon imgIcon"></i>
                      ) : (
                        <i className="girl-icon imgIcon"></i>
                      )}
                    </div>
                    <div className="followInfodgf">
                      <a>
                        动态<span className="followNum">{item.eventCount}</span>
                        <em>|</em>
                      </a>
                      <a>
                        关注<span className="followNum">{item.follows}</span>
                        <em>|</em>
                      </a>
                      <a>
                        粉丝<span className="followNum">{item.followeds}</span>
                      </a>
                    </div>
                    <p className="follow-signature">{item.signature}</p>
                  </div>
                  <div className="user-head-oper fl clear">
                    <a style={{ display: "none" }} className="btn-button send">
                      <i>发私信</i>
                    </a>
                    <a
                      className="btn-button delfollow"
                      style={{ display: "none" }}
                    >
                      <i>已关注</i>
                    </a>
                    <a
                      className="btn-button delfollow-hx"
                      style={{ display: "none" }}
                    >
                      <i>相互关注</i>
                    </a>
                    <a className="btn-button follow">关 注</a>
                  </div>
                </li>
              );
            })
          ) : (
            <React.Fragment></React.Fragment>
          )}
        </ul>
      </div>
    </FollowAndFanWrap>
  );
});
